{% set filterItemId = 'filter-' ~ name ~ '-' ~ random() %}

{% if pluginSelector is not defined %}
    {% set pluginSelector = 'filter-multi-select' %}
{% endif %}

{% if dataPluginSelectorOptions is not defined %}
    {% set dataPluginSelectorOptions = {
        name: name,
        displayName: displayName,
        snippets: {
            disabledFilterText: 'listing.disabledFilterTooltip'|trans|sw_sanitize,
            ariaLabel: ariaLabel,
            ariaLabelCount: 'listing.filterCountAriaLabel'|trans|sw_sanitize
        }
    } %}
{% endif %}

{% block component_filter_multi_select %}
    <div class="filter-multi-select filter-multi-select-{{ name }} filter-panel-item{% if sidebar %} d-grid{% else %} dropdown{% endif %}"
         role="listitem"
         data-{{ pluginSelector }}="true"
         data-{{ pluginSelector }}-options='{{ dataPluginSelectorOptions|json_encode }}'>

        {% block component_filter_multi_select_toggle %}
            <button class="filter-panel-item-toggle btn"
                    aria-expanded="false"
                    {% if ariaLabel %}
                    aria-label="{{ ariaLabel }}"
                    {% endif %}
                    {% if sidebar %}
                    data-bs-toggle="collapse"
                    data-bs-target="#{{ filterItemId }}"
                    {% else %}
                    data-bs-toggle="dropdown"
                    data-boundary="viewport"
                    data-bs-offset="0,8"
                    aria-haspopup="true"
                    {% endif %}>

                {% block component_filter_multi_select_display_name %}
                    {{ displayName }}
                {% endblock %}

                {% block component_filter_multi_select_count %}
                    <span class="filter-multi-select-count"></span>
                {% endblock %}

                {% block component_filter_multi_select_toggle_icon %}
                    {% sw_icon 'arrow-medium-down' style {
                        'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'
                    } %}
                {% endblock %}
            </button>
        {% endblock %}

        {% block component_filter_multi_select_dropdown %}
            <div class="filter-multi-select-dropdown filter-panel-item-dropdown{% if sidebar %} collapse{% else %} dropdown-menu{% endif %}"
                 id="{{ filterItemId }}">
                {% block component_filter_multi_select_list %}
                    <ul class="filter-multi-select-list" aria-label="{{ displayName }}">
                        {% for element in elements %}
                            {% block component_filter_multi_select_list_item %}
                                <li class="filter-multi-select-list-item">
                                    {% block component_filter_multi_select_list_item_inner %}
                                        {% sw_include '@Storefront/storefront/component/listing/filter/filter-multi-select-list-item.html.twig' %}
                                    {% endblock %}
                                </li>
                            {% endblock %}
                        {% endfor %}
                    </ul>
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}
